<template>
    <view class="componentBox">
       <!-- <view class="voice line-item-center" :style="style" @click="bindPlay">
            <view class="bg voicePlay" :class="{ play }"></view>
            <view class="duration text-nowrap">
                <view class="text" v-if="status == 'loading'"> 加载中... </view>
                <view class="text error" v-else-if="status == 'error'"> 加载失败... </view>
                <template v-else>
                    {{ `${duration ? Number(duration).toFixed(1) : ""}″` }}
                </template>
            </view>
        </view> -->
    </view>
</template>

<script>
/**
 * @author: 1580043700@qq.com - Zhang Jun
 * @date: 2022/03/24 16:12
 * @description: 音频播放组件
 */

export default {
    components: {},
    props: ["src", "autoPlay", "audioContextId", "style"],
    data() {
        return {
            status: "loading",
            loading: true,
            play: false,
            duration: 0,
            audioContext: this.audioContextId,
        };
    },
    watch: {
        src(newVal, oldVal) {
            console.warn("watch");
            if (newVal) {
                this.initAudioContext();
            }
        },
    },
    computed: {},
    methods: {
        bindPlay() {
            if (this.status == "success") {
                if (this.play) {
                    this[this.audioContext].pause();
                } else {
                    this[this.audioContext].play();
                }
            }
        },
        initAudioContext() {
            const { src, autoPlay } = this;
            this[this.audioContext] = uni.createInnerAudioContext({ useWebAudioImplement: true });

            this[this.audioContext].onPause(() => {
                this.play = false;
                console.warn("onPause");
            });
            this[this.audioContext].onEnded(() => {
                this.play = false;
                console.warn("onEnded");
            });
            this[this.audioContext].onStop(() => {
                this.play = false;
                console.warn("onStop");
            });
            this[this.audioContext].onCanplay(res => {
                console.warn("onCanplay", res, this[this.audioContext].duration);
                this.status = "success";
                if (autoPlay) {
                    this[this.audioContext].play();
                    console.warn("autoPlay");
                }
            });
            this[this.audioContext].onError(() => {
                this.status = "error";
                this.play = false;
                console.warn("onError");
            });
            this[this.audioContext].onTimeUpdate(() => {
                this.duration = this[this.audioContext].duration;
            });
            this[this.audioContext].onPlay(() => {
                this.play = true;
                console.warn("onPlay");
            });
            this[this.audioContext].src = src;
        },
    },
    created() {},
    mounted() { 
        this.initAudioContext();
    },
    destroyed() {
        console.warn("destroyed");
        this[this.audioContext].destroy();
    },
};
</script>

<style scoped lang="scss">
.componentBox {
    .voice {
        padding: 10rpx 20rpx;
        width: 120px;
        background: #5b76ff;
        border-radius: 10rpx;
        color: white;
        font-size: 28rpx;

        .bg {
            background: url()
                right 0 no-repeat;
            width: 48rpx;
            height: 48rpx;
            background-size: 400%;
        }

        .voicePlay {
            flex-shrink: 0;
            animation-duration: 1s;
            animation-direction: normal;
            animation-iteration-count: infinite;
            animation-timing-function: steps(3);
            &.play {
                animation-name: voicePlay;
            }
        }
        .duration {
            margin-left: 10rpx;
            .text {
                font-size: 24rpx;
            }
        }

        @keyframes voicePlay {
            0% {
                background-position: 0;
            }
            100% {
                background-position: 100%;
            }
        }
    }
}
</style>
